<template>
  <div class="city-group">
    <van-index-bar :index-list="indexList">
      <van-index-anchor index="热门" />
      <div class="list">
        <template v-for="(item, index) in currentGroup?.hotCities">
          <div class="city" @click="cityClick(item)">{{ item.cityName }}</div>
        </template>
      </div>
      <template v-for="item in currentGroup?.cities">
        <van-index-anchor :index="item.group" />
        <template v-for="(iten, indey) in item.cities" :key="indey">
          <van-cell :title="iten.cityName" @click="cityClick(iten)" />
        </template>
      </template>
    </van-index-bar>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import useCityStore from "@/store/modules/city";
import { computed, onMounted } from "vue";

// 定义props
const props = defineProps({
  currentGroup: {
    type: Object,
    default: () => ({}),
  },
});

// 动态的索引
let indexList;
onMounted(() => {
  indexList = computed(() => {
    const list = props.currentGroup.cities.map((item) => item.group);
    list.unshift("#");
    return list;
  });
});

// 监听城市的点击
const router = useRouter();
const cityStore = useCityStore();
const cityClick = (item) => {
  console.log(item);
  // 选中当前城市
  cityStore.currentCity = item;

  // 返回上一级
  router.back();
};
</script>

<style lang="less" scoped>
.list {
  display: flex;
  justify-content: space-around;
  padding: 10px;
  padding-right: 25px;
  flex-wrap: wrap;

  .city {
    width: 70px;
    height: 28px;
    border-radius: 14px;
    font-size: 12px;
    color: #000;
    background: #fff4ec;
    text-align: center;
    line-height: 28px;
    margin: 6px 0;
  }
}
</style>
